<template>
  <div>
    <!-- 导航条 -->
    <nav-bar>
      <div slot="title">购物车</div>
    </nav-bar>

    <!-- 购物车列表 -->
    <div class="shopCarList">
      <div
        class="shopCarListItem"
        v-for="(item, idx) of shopCarListData"
        :key="idx"
      >
        <van-swipe-cell>
          <div class="goods-container">
            <van-checkbox
              class="goods-checked"
              v-model="item.isChecked"
            ></van-checkbox>
            <van-image class="goods-img" :src="item.pictureComperssPath" />
            <div class="goods-content">
              <div class="goods-title">{{ item.name }}</div>
              <div class="goods-sku">
                商品规格：{{ item.sku.specifications }}
              </div>
              <van-stepper v-model="item.num" />
            </div>
            <div class="goods-right">
              <div class="goods-price">
                {{ $utils.$toRmb($utils.$toFixed(item.sku.skuPrice)) }}
              </div>
              <div class="goods-num">x{{ item.num }}</div>
              <div class="goods-total">
                {{
                  $utils.$toRmb($utils.$toFixed(item.num * item.sku.skuPrice))
                }}
              </div>
            </div>
          </div>

          <template #right>
            <van-button
              class="remove"
              square
              type="danger"
              text="删除"
              @click="remove(idx)"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>

    <!-- 提交订单栏 -->
    <van-submit-bar
      class="submitBar"
      :price="allTotal"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>

    <tab-bar></tab-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 1,
      checked: true,
      isShowShopCarList: false, //是否显示购物车
      shopCarListData: [], //购物车列表数据
    };
  },
  computed: {
    allTotal() {
      let sum = 0;
      this.shopCarListData.map((item) => {
        if (item.isChecked) {
          sum += item.num * item.sku.skuPrice;
        }
      });
      return sum * 100;
    },
    allChecked: {
      get() {
        return this.shopCarListData.every((item) => {
          return item.isChecked
        });
      },
      set(bool) {
        if (bool) {
          this.shopCarListData.map((item) => {
            item.isChecked = true;
          });
        } else {
          this.shopCarListData.map((item) => {
            item.isChecked = false;
          });
        }
      },
    },
  },
  methods: {
    remove(idx) {
      this.$dialog
        .confirm({
          message: "确定删除吗？",
        })
        .then(() => {
          this.shopCarListData.splice(idx,1)
          localStorage.setItem("shopCarList",JSON.stringify(this.shopCarListData))
        })
        .catch(() => {});
    },
    onSubmit() {},
  },
  created() {
    let shopCarList = localStorage.getItem("shopCarList");
    if (!shopCarList) {
      this.isShowShopCarList = false;
    } else {
      this.isShowShopCarList = true;
      this.shopCarListData = JSON.parse(shopCarList);
    }
  },
};
</script>

<style scoped>
.goods-container {
  display: flex;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
.goods-img {
  width: 160px;
  height: 160px;
  border-radius: 20px;
  overflow: hidden;
  margin: 0 20px;
}
.goods-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.goods-title {
  font-size: 30px;
}
.goods-sku {
  font-size: 26px;
  margin: 10px 0;
}
.goods-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.goods-price {
  font-size: 30px;
}
.goods-num {
  font-size: 30px;
}
.goods-total {
  font-size: 40px;
  color: red;
}
.remove {
  height: 100%;
}
.submitBar {
  bottom: 106.33px;
}
</style>
